<template>
  <div class="case-manage">
    <!-- 上面的查询框 -->
    <div class="query-form">
      <el-form :inline="true" :model="queryForm" ref="form">
        <el-form-item label="案例名称" prop="caseName">
          <el-input v-model="queryForm.itemName" placeholder="请输入案例名称" />
        </el-form-item>
        <el-form-item label="案例分类" prop="status">
          <el-select v-model="queryForm.status" placeholder="请选择案例分类">
            <el-option :value="1" label="H5 类案例"></el-option>
            <el-option :value="2" label="网站类案例"></el-option>
            <el-option :value="3" label="专题类案例"></el-option>
            <el-option :value="4" label="其它案例"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="handleReset('form')">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="action">
        <el-button type="primary" @click="handleCreateCase">新增案例</el-button>
      </div>
    </div>
    <!-- 表格部分 -->
    <div class="base-table">
      <div class="base-item">
        <div
          class="base-list"
          @mouseenter="onCaseEnter(item.id, $event)"
          @mouseleave="onCaseLeave"
          v-for="item of caseList"
          :key="item.id"
          @click="onTapList(item)"
        >
          <el-image
            class="img"
            :src="item.poster"
            alt="联名周边新品预定"
          ></el-image>
          <p class="title">{{ item.caseName }}</p>
          <p class="time">{{ item.startTime }} 至 {{ item.endTime }}</p>
          <div class="base-mask" v-show="hoverId == item.id">
            <div class="if-phone" v-if="item.caseType == 1">
              <el-image
                src="https://www.hbydf.org.cn/Uploads/images/20200305/33e2a6ab2e3684bd8672104c2b9d7bb6.jpg"
                class="code"
              />
              <span class="hint">手机收一扫，预览项目</span>
            </div>
            <div class="if-pc" v-else>
              <!-- 编辑项目 -->
              <div class="edit-item" @click="onTapEdit(item)">编辑项目</div>
              <!-- 查看项目 -->
              <div class="check-item" @click="onTapLink(item)">在线预览</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增案例 -->
    <el-dialog
      title="新增案例"
      v-model="showModal"
      @close="handleClose"
      :close-on-click-modal="false"
    >
      <el-form ref="dialogForm" :model="caseForm" label-width="130px">
        <!-- 案例名称 -->
        <el-form-item label="案例名称" prop="caseName">
          <el-input v-model="caseForm.caseName" placeholder="请输入案例名称" />
        </el-form-item>
        <!-- 案例类型 -->
        <el-form-item label="案例类型">
          <el-radio v-model="caseForm.caseType" label="1">移动端</el-radio>
          <el-radio v-model="caseForm.caseType" label="2">PC端</el-radio>
        </el-form-item>
        <!-- 案例二维码 移动端显示-->
        <el-form-item label="案例二维码" v-show="caseForm.caseType == 1">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :disabled="caseForm.caseCode !== ''"
            :show-file-list="false"
            :on-success="handleCodeSuccess"
            :before-upload="beforeCodeUpload"
          >
            <img
              v-if="caseForm.caseCode"
              :src="caseForm.caseCode"
              class="code"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <div
              class="delete-circle"
              v-if="caseForm.caseCode"
              @click.stop.prevent="onRemoveCode"
            >
              <i class="el-icon-delete code-close"></i>
            </div>
          </el-upload>
        </el-form-item>
        <!-- 案例跳转链接 PC端显示 -->
        <el-form-item label="案例跳转链接" v-show="caseForm.caseType == 2">
          <el-input
            v-model="caseForm.caseLink"
            placeholder="请输入案例线上预览链接"
          ></el-input>
        </el-form-item>
        <!-- 案例的上线时间 -->
        <el-form-item label="案例上线周期" style="margin-bottom: 0px">
          <el-col :span="11">
            <el-form-item prop="startTime">
              <el-date-picker
                type="date"
                placeholder="请选择案例上线时间"
                v-model="caseForm.startTime"
              />
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2"> 至 </el-col>
          <el-col :span="11">
            <el-form-item prop="endTime">
              <el-date-picker
                placeholder="请选择案例下线时间"
                type="date"
                v-model="caseForm.endTime"
              />
            </el-form-item>
          </el-col>
        </el-form-item>
        <!-- 案例的所属项目 -->
        <el-form-item label="案例所属项目">
          <el-select
            v-model="caseForm.source"
            size="medium"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择案例所属项目(如不在项目列表中可自行输入)"
          >
            <el-option
              v-for="item in itemList"
              :key="item.id"
              :label="item.itemName"
              :value="item.itemName"
            >
              {{ item.itemName }}
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 案例的简短介绍 -->
        <el-form-item label="案例的简短介绍">
          <el-input
            type="textarea"
            v-model="caseForm.desc"
            placeholder="请输入简短的案例描述(可不填)"
            :autosize="true"
          ></el-input>
        </el-form-item>
        <!-- 案例封面图上传 -->
        <el-form-item label="案例封面图">
          <el-upload
            class="upload-demo"
            :disabled="caseForm.poster !== ''"
            drag
            :show-file-list="false"
            action="https://jsonplaceholder.typicode.com/posts/"
          >
            <!-- 未上传图片 -->
            <div class="poster-upload" v-if="!caseForm.poster">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
            </div>
            <!-- 已有图片 -->
            <div class="poster-img" v-else>
              <el-image :src="caseForm.poster"></el-image>
            </div>
            <div
              class="delete-circle"
              v-if="caseForm.poster"
              @click.stop.prevent="onRemovePoster"
              style="position: absolute"
            >
              <i class="el-icon-delete code-close"></i>
            </div>
            <!-- tips -->
            <template #tip>
              <div class="el-upload__tip">封面建议尺寸 193 * 207</div>
            </template>
          </el-upload>
        </el-form-item>
        <!-- 案例效果图上传 -->
        <el-form-item label="案例效果图上传">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            multiple
            :on-preview="handlePictureCardPreview"
            :on-remove="handlePictureCardRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog v-model="previewShow">
            <img width="100%" :src="previewImgUrl" />
          </el-dialog>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Case',
  data() {
    return {
      queryForm: {},
      caseList: [],
      itemList: [],
      hoverId: -1,
      // 新增案例
      showModal: false,
      caseForm: {
        caseType: '1',
        source: [],
        caseCode: '', // https://static3.sycdn.imooc.com/static/img/mobile/app-down.png
        poster: '' // https://ossweb-img.qq.com/images/clientpop/act/lol_1630654094_uploadnewsImg.jpg
      },
      previewShow: false,
      previewImgUrl: '',
      action: '' // action 值分为 add edit delete
    }
  },
  methods: {
    // 案例检索
    handleQuery() { },
    // 重置查询表单
    handleReset(form) {
      this.$refs[form].resetFields()
    },
    // 新增案例
    handleCreateCase() {
      this.showModal = true
      this.action = 'add'
    },
    // 关闭新增案例
    handleClose() {
      this.showModal = false
      this.caseForm = {
        caseType: '1',
        caseCode: '',
        caseList: [],
        poster: ''
      }
    },
    // 案例点击
    onTapList(item) {
      // 手机端，直接打开编辑页面
      if (item.caseType == 1) {
        this.showModal = true
        this.caseForm = item
        this.action = 'add'
      }
    },
    // PC 端案例编辑
    onTapEdit(item) {
      this.caseForm = item
      this.showModal = true
      this.action = 'add'
    },
    // PC 端案例在线预览
    onTapLink(item) {
      console.log(item)
      window.open('https://www.baidu.com')
    },
    // 新增案例二维码上传处理
    beforeCodeUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleCodeSuccess(res, file) {
      console.log(res, file)
    },
    onRemoveCode() {
      this.caseForm.caseCode = ''
    },
    onRemovePoster() {
      this.caseForm.poster = ''
    },
    // 预览案例效果图
    handlePictureCardPreview(file) {
      this.previewImgUrl = file.url
      this.previewShow = true
    },
    // 移除案例效果图
    handlePictureCardRemove(file, fileList) {
      console.log(file, fileList)
    },
    // 鼠标滑过对应案例
    onCaseEnter(id, event) {
      this.hoverId = id
    },
    // 鼠标滑出对应案例
    onCaseLeave() {
      this.hoverId = -1
    },
    // 案例新增、编辑提交
    handleSubmit() {
      console.log(this.caseForm)
    },
    // 请求案例列表
    async getCaseList() {
      try {
        let list = await this.$api.getCaseList()
        this.caseList = list
      } catch (e) {
        throw new Error(e)
      }
    },
    // 请求项目列表
    async getItemList() {
      try {
        let list = await this.$api.getItemList()
        this.itemList = list
      } catch (e) {
        throw new Error(e)
      }
    }
  },
  mounted() {
    this.getCaseList()
    this.getItemList()
  }
}
</script>

<style lang="scss">
.query-form {
  display: flex;
  justify-content: space-between;
}
.base-item {
  display: grid;
  grid-template-columns: repeat(auto-fill, 193px);
  grid-gap: 20px;
  background: #eef0f3;
  .base-list {
    border-radius: 4px;
    width: 193px;
    height: 278px;
    background-color: #fefefe;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    -webkit-transition: transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    &:hover {
      -webkit-transform: translateY(-3%);
      transform: translateY(-3%);
    }
    .title {
      width: 100%;
      overflow: hidden;
      box-sizing: border-box;
      padding: 6px 10px 4px 10px;
      font-size: 14px;
      color: #424242;
      line-height: 18px;
      text-align: left;
    }
    .time {
      position: absolute;
      font-size: 12px;
      color: #1da6ba;
      left: 10px;
      right: 10px;
      bottom: 6px;
    }
    .img {
      width: 193px;
      height: 207px;
    }
    .base-mask {
      background: rgba(0, 0, 0, 0.8);
      width: 193px;
      height: 207px;
      line-height: 207px;
      position: absolute;
      top: 0;
      left: 0;
      text-align: center;
      .if-phone,
      .if-pc {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .code {
          width: 110px;
          height: 110px;
          margin-bottom: 20px;
        }
        .hint {
          color: #fff;
          font-size: 12px;
          line-height: 0;
        }
      }
      .if-pc {
        .edit-item,
        .check-item {
          width: 150px;
          height: 40px;
          line-height: 40px;
          border-radius: 40px;
          color: #fff;
          background: #52a0fd;
          background: -webkit-linear-gradient(
            left,
            #52a0fd 0%,
            #00e2fa 80%,
            #00e2fa 100%
          );
          background: linear-gradient(
            to right,
            #52a0fd 0%,
            #00e2fa 80%,
            #00e2fa 100%
          );
        }
        .check-item {
          margin-top: 20px;
          background: #fa6c9f;
          background: -webkit-linear-gradient(
            left,
            #fa6c9f 0%,
            #ffe140 80%,
            #ffe140 100%
          );
          background: linear-gradient(
            to right,
            #fa6c9f 0%,
            #ffe140 80%,
            #ffe140 100%
          );
        }
      }
    }
  }
}
.case-manage .line {
  margin: 0 15px;
}
.case-manage .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.case-manage .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.case-manage .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 110px;
  height: 110px;
  line-height: 110px;
  text-align: center;
}
.code {
  width: 110px;
  height: 110px;
  display: block;
}
.delete-circle {
  width: 24px;
  height: 24px;
  background: rgba(0, 0, 0, 0.6);
  right: 6px;
  top: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px auto 6px;
}
.code-close {
  color: #fff;
}
.case-manage .el-select--medium {
  width: 420px;
}
.case-manage .el-form-item {
  margin-bottom: 22px;
}
.case-manage .upload-demo {
  position: relative;
}
.case-manage .el-upload__tip {
  position: absolute;
  left: 375px;
  top: 74px;
}
</style>